<script setup>
import { getActivityAPI } from '@/apis/activity'
import { onMounted, ref } from "vue"
import { useRoute } from 'vue-router';

// 使用了 useRoute 函数来获取当前路由信息，然后通过 route.params 来访问路由参数。确保你的模块中引入了 useRoute 函数，
const route = useRoute();
// 定义props ：简单的模块，抽象成props
const props = defineProps({
    // 活动id
    activeId: {
        type: Number,
        //required: true // 如果希望活动 id 是必传的，可以添加 required: true  
    },
    // 顶部图片URL
    topUrl: {
        type: String
    },
    // 中间顶部URL
    midtopUrl: {
        type: String
    },
    // 中间底部URL
    midbottomUrl: {
        type: String
    },
    // 底部图片URL
    bottomUrl: {
        type: String
    },

})
const activityId = ref('');
const activity = ref({})
const getActivity = async () => {
    // 获取 $route.params.activityId
    activityId.value = route.params.activityId;
    const res = await getActivityAPI(activityId.value)
    activity.value = res.data
    console.log((await res).data)
    console.log(activity.value)

}
onMounted(() => getActivity());
</script>
<template>
    <div id="root">
        <div class="cm-layout">
            <div class="cm-layout-content">
                <div class="cm-content-item" style="position: static;">
                    <div class="cm-content-item-imagelist">
                        <div class="cm-image-item">
                            <img :src="activity.imgDetailsTop" alt="">
                        </div>
                        <div class="cm-image-item">
                            <div v-if="activity.imgDetailsMidTop != null">
                                <img :src="activity.imgDetailsMidTop" alt="">
                            </div>
                        </div>
                        <div class="cm-image-item">
                            <div v-if="activity.imgDetailsBottom != null">
                                <img :src="activity.imgDetailsMidBottom" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cm-content-item" style="position: relative; background-color: rgba(30, 22, 22, 0);">
                    <div class="cm-image-item">
                        <div v-if="activity.imgDetailsBottom != null">
                            <img :src="activity.imgDetailsBottom" alt="">
                        </div>
                    </div>
                    <RouterLink to="/appdownload">
                        <!-- <div v-if="activity.imgDetailsBottom != ''">
                            <button class="cm-button">
                                立即预定
                            </button>
                        </div> -->
                        <div style=" background-color: rgb(253, 253, 253);">
                            <button class="cm-button" style="top: -10%;">
                                立即预定
                            </button>
                        </div>
                    </RouterLink>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
div {
    display: block;
}

#root {
    max-width: 1920px;
    min-width: 1280px;
    width: 100%;
    margin: 0 auto;
    color: #000;
}

.cm-layout {
    background-repeat: no-repeat;
    background-size: cover;
}

.cm-content-item {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    min-width: 1280px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.cm-content-item {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    min-width: 1280px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.cm-button {
    border-radius: 12px;
    // background-color: #eeff02;
    background-color: rgb(11, 87, 208);
    border: 0 solid #fff;
    color: #f9f9f9;
    letter-spacing: 2px;
    outline: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;

    border-radius: 4px;
    font-size: 20px;
    width: 620px;
    height: 70px;
    font-weight: normal;
    position: relative;
    left: 50%;
    top: auto;
    display: block;
    transform: translateX(-50%);

    // <!-- style="    " -->
}
</style>